<template>
<div id="Transaction">
	<div class="search_box">
		<div class="container">
			<p>{{ $lang("BLOCK_TAB") }}</p>
		 		<!-- <el-input 
		 			v-model="searchInput" 
		 			:placeholder="$lang('SEARCH_TIP')">
		 			<el-button slot="append" type="danger" @click="getBlockByBlockHeight"><img src="../../assets/img/search.png" alt="$lang('LATEST_BLOCKS')"><span>{{ $lang("SEARCH") }}</span></el-button>
		 		</el-input> -->
		</div>
	</div>
	<div class="tran_table">
		<div class="container">
			<div class="bread_rumb clearfix">
				<div class="f_l">
					<el-breadcrumb separator-class="el-icon-arrow-right">
					  <el-breadcrumb-item :to="{ path: '/' }">{{ $lang('HOME') }}</el-breadcrumb-item>
					  <el-breadcrumb-item>{{ $lang('BLOCK_TAB') }}</el-breadcrumb-item> 
					</el-breadcrumb>
				</div>
				<!-- <div class="f_r">
					<el-breadcrumb separator-class="el-icon-arrow-right">
						<el-breadcrumb-item >{{ $lang('BLOCK_TAB') }}</el-breadcrumb-item>
					  <el-breadcrumb-item :to="{ path: 'transaction' }">{{ $lang('TRANSACTION') }}</el-breadcrumb-item>
					</el-breadcrumb>
				</div> -->
			</div>
			<el-table
		    :data="list"
		    style="width: 100%;border:10px;background-color: #212C4F;"
            :empty-text="$lang('NODATA')"
		  	:row-style="{
		  		'border':'none',
		  		'background-color':'#1D2748',
		  		'border-bottom':'none',
		  		'border-radis':'5px',
		  	}"	
		  	>
		    <el-table-column
		      prop="blockheader.hash"
		      :label="$lang('CURRENT_HASH')"
		      >
              <template scope='scope' ><span class="callspanT">{{ scope.row.blockheader.hash }}</span></template>
		    </el-table-column>
		    <el-table-column
		      prop="blockheight"
		      :label="$lang('HEIGHT')"
		      width="100"
		      >
		    </el-table-column>
		    <el-table-column
		      prop="producer"
		      :label="$lang('PRODUCER')">
                <template scope='scope' ><router-link  class="callspan" :to="{path:'/account/sender/' + scope.row.producer }">{{ scope.row.producer }}</router-link></template>
		    </el-table-column>
		    <el-table-column
		      prop="blockheader.timeStr"
		      :label="$lang('DATE')"
		      >
		    </el-table-column>
		    <el-table-column
		      prop="blocksize"
		      :label="$lang('BLOCK_SIZE')"
		      width="140"
		      >
		    </el-table-column>
		    <el-table-column
		      prop="blockheader.hashprevblock"
		      :label="$lang('PREV_BLOCK_HASH')">
              <template scope='scope' ><span class="callspanT">{{ scope.row.blockheader.hashprevblock }}</span></template>
		    </el-table-column>
		    <el-table-column
		      prop="blockheader.version"
		      :label="$lang('More')"
		      width="110"
		      >
               <template scope='scope' ><router-link style="cursor: pointer;color: #cca33c;" :to="{path:'/blocksDetailed/' + scope.row.blockheader.hash}">>></router-link></template>
		    </el-table-column>
		  </el-table>
		  <el-pagination
			  :current-page="currentPage"
			  layout="prev, pager, next"			  
			  :total="pages * 10"
			  @current-change="getBlock"
			  >
			</el-pagination>
		</div>
	</div>
</div>
</template>

<script>
import axios from 'axios';
import { gets } from '@/api/api.js';
import url from '@/api/url.js';
export default {
	data(){
		return {
			searchInput:"",
			currentPage:1, // 分页当前页
			pageSize:5, // 每页条数
			pages: 0,
			list: [],
		}
	},
	mounted(){
        if(this.$route.query.blockHeight){
            this.searchInput = this.$route.query.blockHeight
            this.getBlockByBlockHeight(1)
        } else if (this.$route.query.blockhash) {
            this.searchInput = this.$route.query.blockhash
            this.getBlockByBlockHash()
        } else {
            this.getBlock(1);
        }
	},
	methods:{
        getBlock(type){
            let that = this
            const loading = this.$loading({
                text: that.$lang('loading'),
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            axios.get(url.urlblockH + '/block/pageList', {
                params: {
                    pageNum: type,
                    pageSize: 8
                }
            })
            .then(function (res) {
                loading.close()
                that.list = res.data.data.list
                that.pages = res.data.data.pages
            })
            .catch(function (error) {
                loading.close()
                console.log(error);
            })
        },
        getBlockByBlockHeight(type){
            let that = this
            if (that.searchInput == '') {
                this.getBlock(1);
            } else {
                const loading = this.$loading({
                    text: that.$lang('loading'),
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                axios.get(url.urlblockH + '/block/getBlockByBlockHeight', {
                    params: {
                        blockHeight: that.searchInput,
                        pageNum: type,
                        pageSize: 8
                    }
                })
                .then(function (res) {
                    loading.close()
                    that.list = [res.data.data]
                    that.pages = 0
                })
                .catch(function (error) {
                    loading.close()
                    console.log(error);
                })
            }
        },
        getBlockByBlockHash(){
            let that = this
            if (that.searchInput == '') {
                this.getBlock(1);
            } else {
                const loading = this.$loading({
                    text: that.$lang('loading'),
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                axios.get(url.urlblockH + '/block/getBlockByHashSearch', {
                    params: {
                        blockhash: that.searchInput,
                    }
                })
                .then(function (res) {
                    loading.close()
                    that.list = [res.data.data]
                    that.pages = 0
                })
                .catch(function (error) {
                    loading.close()
                    console.log(error);
                })
            }
        }
	}
	
}
</script>

<style lang="scss" scoped >
@import '~assets/scss/transaction.scss';
.callspan{
    cursor: pointer;
    color: rgb(204, 163, 60) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.callspanT{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: Default !important;
}
</style>